<template>
  <div class="my-collection-container">
    <div class="my-collection-content" style="height: 680px; overflow-y: auto">
      <div
        v-for="item in collectedInfo"
        :key="item.knowledgeId"
        style="padding: 6px 20px"
      >
        <!-- 展示文章的标签，文章的标题，文章的作者和收藏标志-->
        <!-- 超出内容设置隐藏，card重新设置padding，上一级组件清空了样式 -->
        <el-card
          shadow="hover"
          class="collected-box-card"
          style="padding: 12px"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="article-tags" style="text-align: left">
                <el-tag
                  v-for="(tag, index) in item.tags"
                  :key="index"
                  size="small"
                  style="margin-right: 5px"
                >
                  {{ tag }}
                </el-tag>
              </div></el-col
            >
            <el-col :span="12">
              <!-- 链接展示，点击进入阅读文章的模式 -->
              <div class="article-title" style="text-align: left">
                <el-link
                  target="_blank"
                  @click="goBlogDetail(item.knowledgeId)"
                  >{{ item.title }}</el-link
                >
              </div>
            </el-col>
            <el-col :span="4">
              <div class="article-author" style="overflow: hidden">
                {{ item.author }}
              </div></el-col
            >
            <el-col :span="2">
              <div class="collection-icon">
                <i
                  @click="cancelCollected(item)"
                  class="el-icon-star-on"
                  :style="{
                    fontSize: '24px',
                    color: item.state === 0 ? '#FFCC76' : '#EDEDED',
                    cursor: 'pointer',
                  }"
                ></i></div
            ></el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <div class="my-collection-pagination">
      <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-col :span="24">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :prev-text="`上一页`"
            :next-text="`下一页`"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { getMyCollect, addOrRemoveCollect } from "@/apis/apis";
@Component({
  name: "myCollection",
})
export default class myCollection extends Vue {
  collectedInfo: [
    {
      knowledgeId: number;
      tags?: string[];
      title?: string;
      author?: string;
      state?: number;
    }
  ] = [
    {
      knowledgeId: 1,
      tags: ["人工智能", "AIGC", "OpenAI"],
      title: "ChatGPT横空出世",
      author: "小明",
      state: 0,
    },
  ];
  // 总的文章收藏数
  total: number = 0;
  pageSize: number = 10;
  pageIndex: number = 1;
  mounted() {
    this.getUserAllCollect(this.pageIndex, this.pageSize);
  }
  // 1.获取所有的收藏信息
  getUserAllCollect(pageNum: number, pageSize: number) {
    getMyCollect(pageNum, pageSize)
      .then((res) => {
        if (res.data.code === "200") {
          this.$message.success("获取我的收藏信息成功");
          this.total = res.data.data.total;
          let resData = res.data.data.records;
          this.collectedInfo = [] as any;
          let len = resData.length;
          for (let i = 0; i < len; i++) {
            let tagsName = [];
            if (resData[i].tags) {
              tagsName = resData[i].tags.map((item: any) => {
                return item.tagName;
              });
            }
            this.collectedInfo.push({
              knowledgeId: resData[i].knowledgeId,
              tags: tagsName,
              title: resData[i].title,
              author: resData[i].nickName,
              state: 0,
            });
          }
        } else {
          this.$message.error("获取收藏信息失败");
        }
      })
      .catch((err) => {
        this.$message.error("获取收藏信息失败");
      });
  }
  // 2.查看文章的详细信息
  goBlogDetail(knowledgeId: number) {
    let id = knowledgeId.toString();
    const route = this.$router.resolve({
      name: "blogDetail",
      query: {
        knowledgeId: id,
      },
    });
    window.open(route.href, "_blank");
  }
  // 3. 点击取消收藏，页面上不会消失，星星变色，刷新后消失
  //   在此期间用户可以点击进行文章查看并重新添加,最新的位置
  cancelCollected(item: any): void {
    // 1.向后端发送通知
    // 2.改变星星现实状态
    item.state = item.state === 0 ? 1 : 0;
    addOrRemoveCollect(item.knowledgeId)
      .then((res) => {
        if (res.data.code === "200") {
          this.$message.success("取消收藏成功");
        } else {
          this.$message.error("取消收藏失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  // 4.切换页面大小时重新请求
  handleSizeChange(val: number): void {
    this.pageSize = val;
    this.getUserAllCollect(this.pageIndex, this.pageSize);
  }
  // 5.处理当前页面的切换
  handleCurrentChange(val: number): void {    
    this.pageIndex = val;
    this.getUserAllCollect(this.pageIndex, this.pageSize);
  }
}
</script>

<style lang="scss" scoped>
</style>